<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + " ://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<jsp:include page="head.jsp"/>
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css">
<jsp:include page="public.jsp"/>
<style>
    body {
        background-color: #fff;
        margin-bottom: 52px;
        padding: 15px 8px 0;
        width: 98.5%;
        box-sizing: border-box;
    }

    .selectform .children {
        display: inline-block;
        width: 32%;
        text-align: center;
        font-size: 16px;
        height: 40px;
        box-sizing: border-box;
        padding-bottom: 4px;
    }

    input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
        border: none;
        text-align: center;
        margin-bottom: 0px;
        padding: 0;
    }

    .selectform {
        position: relative;
    }

    .selectform .layui-form-item {
        margin-bottom: 0;
    }

    .selectform .layui-input-block {
        margin-left: 0;
    }

    .selectform .layui-form-select dl dd.layui-this {
        background-color: #0080ff;
    }

    .selectform img {
        z-index: 99;
        display: block;
        width: 32%;
        position: absolute;
        top: 30px;
        left: 0;
        transition: all 0.5s ease-in-out;
    }

    banner {
        height: 180px;
        width: 100%;
        background: url("<%=path%>/images/back.png");
        background-size: 100% 144px;
        background-repeat: no-repeat;
        width: 100%;
        background-position: 0px 109px;
        display: block;
    }

    .mui-popup {
        z-index: 19891018;
    }

    iframe {
        display: none;
    }

    .searchBox {
        overflow: hidden;
        width: 330px;
        height: 40px;
        margin: 10px auto;
        position: relative;
        border: 3px #FFB800 solid;
        border-radius: 50px;
    }

    .searchBox input {
        text-align: left;
        width: 68.5%;
        height: 100%;
        color: #666;
        margin-left: 18px;
        border: none;
        background-color: transparent;
    }

    .searchBtn {
        position: absolute;
        right: -1px;
        top: -3px;
        width: 57px;
        height: 40px;
        border: none;
        color: #fff;
        font-size: 30px;
        font-weight: 600;
        text-align: center;
        line-height: 40px;
        padding: 0;
    }

    .closeicon {
        position: absolute;
        right: 60px;
        top: 7px;
        font-size: 20px;
        height: 20px;
        width: 20px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.1);
    }

    .mui-btn-outlined.mui-btn-warning, .mui-btn-outlined.mui-btn-yellow {
        color: #fff;
    }

    .mui-btn-warning, .mui-btn-yellow {
        color: #fff;
        background-color: #FFB800;
    }

    .mui-btn, button {
        padding: 0;
    }

    .mui-btn.mui-icon {
        font-size: 30px;
        line-height: 1;
    }

    .phone input.phoneInput {
        display: inline-block;
        width: 180px;
        height: 17px;
        text-align: left;
    }

    .childrenNum {
        position: absolute;
        left: -1000px;
        top: -1000px;
        width: 10px;
        height: 2px;
        background: transparent;
        color: transparent;
    }
</style>
</head>
<body>
<div class="myselfID" style="display: none;"></div>
<banner>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="<%=path%>/images/2.jpg"></div>
            <div><img src="<%=path%>/images/1.jpg"></div>
            <div><img src="<%=path%>/images/tag.png"></div>
            <div><img src="<%=path%>/images/bg.png"></div>
        </div>
    </div>
</banner>
<div class="searchBox">
    <input type="text" class="searchText" name="searchText" placeholder="请输入标题或地址">
    <span class="closeicon mui-icon mui-icon-closeempty"></span>
    <button type="button" class="mui-icon mui-icon-search searchBtn mui-btn mui-btn-warning mui-btn-outlined"></button>
</div>

<form class="layui-form selectform" action="">
    <img src="<%=path%>/images/bottom.png" alt="">
    <div class="all children">全部</div>
    <div class="layui-form-item children">
        <div class="layui-input-block">
            <select name="type" lay-filter="typesel" lay-verify="">
                <option value="0" selected="">信息类别</option>
                <option value="1">遗失信息</option>
                <option value="2">招领信息</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item children">
        <div class="layui-input-block">
            <select name="thing" lay-filter="thingsel">
                <option value="0" selected="">物品类别</option>
                <option value="1">证件</option>
                <option value="2">书本</option>
                <option value="3">财务</option>
                <option value="4">数码</option>
                <option value="5">其他</option>
            </select>
        </div>
    </div>
</form>
<div class="results"></div>
<div class="mui-content" style="margin-bottom: 20px;">
    <div class="mui-card">
        <ul class="mui-table-view">
            <ul class="put_found">
            </ul>
        </ul>
    </div>
</div>
<div id="demo1" style="text-align:center;"></div>
<div class="tabs">
    <div class="tab">
        <span class="mui-icon mui-icon-compose"></span>
        <div class="tabText">发布信息</div>
    </div>
    <div class="tab tabActive">
        <span class="mui-icon mui-icon-home index_tab"></span>
        <div class="tabText tabtext_out">首页</div>
    </div>
    <div class="tab">
        <span class="mui-icon mui-icon-person"></span>
        <div class="tabText">个人中心</div>
    </div>
</div>
<div class="displayimg"></div>
<script src="<%=path%>/js/mui.min.js"></script>
<script src="<%=path%>/layui/layui.all.js"></script>
<script>
    /*
    *
    *  *************** 调用js桥方法 ***************
    *
    * */
    var selfUser;
    // 设置页面标题并显示
    XuntongJSBridge.call('setWebViewTitle', {'title': '华广失物招领'});

    // 存储当前用户
    XuntongJSBridge.call('getPersonInfo', {}, function (result) {
        if (result.success === "true") {
            selfUser = result.data;
        }
    });

    // 弹出菜单
    XuntongJSBridge.call('createPop',
        {
            'popTitle': String,
            'popTitleCallBackId': String,
            'menuList': ['refresh', 'openWithBrowser']
        },
        function (result) {
        }
    );
</script>
<script>
    $(function () {
        /*tab标签*/
        var $tab = $('.tab');
        var $tabText = $('.tabText');
        $tab.click(function () {
            var index = $(this).index();
            $(this).addClass("tabActive").siblings().removeClass("tabActive");
            $(this).children("span").addClass("index_tab").parent().siblings().children("span").removeClass("index_tab");
            $(this).children($tabText).addClass("textActive tabtext_out").parent().siblings().children($tabText).removeClass("textActive tabtext_out");
            if (index == 0) {
                window.location.href = "<%=path%>/add"
            } else if (index == 1) {
                window.location.href = "<%=path%>/index"
            } else {
                window.location.href = "<%=path%>/person"
            }
        });
    });
</script>
<script>
    ;!function () {
        //mui初始化
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        /*
        * 声明变量
        * */
        var $children = $('.selectform .children'),
            $selectimg = $('.selectform img'),
            $allbtn = $('.selectform .all'),
            $selfId = $('.myselfID'),
            $contact,
            $displayImg = $('.displayimg');
        var typeArray = new Array("失物信息", "招领信息"),
            thingArray = new Array("证件", "书本", "财务", "数码", "其他"),
            $put_found = $('.put_found');
        var width = $(window).width() * 0.92;
        var height = $(window).height() * 0.8;
        var allType = 0, allThing = 0, allSearch = "", totalNum = 0, start, size;
        /*
        * 调用框架
        * */
        var form = layui.form,
            laypage = layui.laypage,
            layer = layui.layer;

        /*
        * 搜索框
        * */
        var $searchBtn = $('.searchBtn'),
            $searchText = $('.searchText'),
            $closeicon = $('.closeicon');
        $searchBtn.on("click", function () {
            allSearch = $searchText.val();
            countNum(allType, allThing, allSearch)
        });

        $closeicon.click(function () {
            $searchText.val("");
        });

        /*
        *  当前列表
        *  type信息类别 thing物品类别 search模糊搜索 start分页开始页 size每页大小
        * */
        function listPage(type, thing, search, start, size) {
            layer.load(2);
            $.ajax({
                type: "post",
                url: "<%=path%>/message/findList",
                async: true,
                dataType: "json",
                data: {
                    "type": type,
                    "thing": thing,
                    "self": 0,
                    "status": 0,
                    "search": search,
                    "start": start,
                    "size": size
                },
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.result === "faild") {
                        if (data.cause === "no login error") {
                            layer.msg('请先登录智慧校园云平台', {icon: 5, time: 800});
                            setTimeout(function () {
                                XuntongJSBridge.call('close');
                            }, 900);
                        } else {
                            window.location.href = "<%=path%>/error";
                        }

                    } else {
                        $put_found.html("");
                        for (var i = 0; i < data.data.messageList.length; i++) {
                            var datas = data.data.messageList[i];
                            var thing = thingArray[parseInt(datas.thing) - 1],
                                type = typeArray[parseInt(datas.type) - 1];
                            var time = new Date(datas.time).toLocaleString();

                            // 处理图片
                            var images = datas.images, imgurl = "", imgarray = new Array(), imgFlag;
                            imgFlag = images === null || images === "";
                            if (imgFlag) {
                                imgurl = '<img src="<%=path%>/images/default.png" alt="" class="mes-img">';
                            } else {
                                imgarray = images.split(";");
                                imgurl = '<img src="<%=path%>/res/img/' + imgarray[0] + '" alt="" class="mes-img">';
                            }
                            var $html = $('<li class="foundli">\n' +
                                '                    <div class="title">' + datas.title + '</div>\n' +
                                '                    <div class="message-content">\n' +
                                '                        <div class="left">\n' +
                                '                            <div class="time">时间：' + time + '</div>\n' +
                                '                            <div class="address">地点：' + datas.address + '</div>\n' +
                                '                            <div class="type">信息类型：' + type + '</div>\n' +
                                '                            <div class="thing">物品类型：' + thing + '</div>\n' +
                                '                        </div>\n' +
                                '                        <div class="right">\n' + imgurl +
                                '                        <div class="imgFlag" style="display: none;">' + imgFlag + '</div></div>\n' +
                                '                        <div class="more">展开更多</div>\n' +
                                '                        <div class="ID" style="display">' + datas.id + '</div>\n' +
                                '                    </div>\n' +
                                '                </li>'
                                )
                            ;
                            $put_found.append($html);
                        }
                        clickMore();
                        $('.right img').on("click", function () {
                            if ($(this).siblings(".imgFlag").text() === "false") {
                                var _this = $(this).clone();
                                $displayImg.html("");
                                $displayImg.append(_this);
                                $displayImg.children("img").css({
                                    width: "300px",
                                    height: "330px"
                                });
                                layer.open({
                                    type: 1,
                                    title: false,
                                    shade: 0.2,
                                    shadeClose: true,
                                    area: ['300px', '330px'],
                                    content: $displayImg,
                                    end: function () {
                                        layer.closeAll("loading");
                                        $displayImg.html("");
                                    }
                                });
                            }
                        });
                    }
                },
                error: function (data) {
                    layer.closeAll("loading");
                    layer.msg('请检查网络', {icon: 5, time: 600});
                }
            });
        }

        function countNum(type, thing, search) {
            $.ajax({
                type: "post",
                url: "<%=path%>/message/countNum",
                async: true,
                dataType: "json",
                data: {
                    "type": type,
                    "thing": thing,
                    "self": 0,
                    "status": 0,
                    "search": search
                },
                success: function (data) {
                    if (data.result === "faild") {
                        layer.closeAll("loading");
                        if (data.cause === "no login error") {
                            layer.msg('请先登录智慧校园云平台', {icon: 5, time: 600});
                            setTimeout(function () {
                                XuntongJSBridge.call('close');
                            }, 700);
                        } else {
                            window.location.href = "<%=path%>/error";
                        }

                    } else {
                        $selfId.text(data.data.id);
                        totalNum = data.data.totalNum;
                        laypage.render({
                            elem: 'demo1'
                            , count: totalNum //数据总数
                            , groups: 4
                            , theme: "#0080ff"
                            , first: false
                            , last: false
                            , jump: function (obj, first) {
                                start = obj.curr - 1;
                                size = obj.limit;
                                this.count = totalNum;
                                start = start * size
                                listPage(allType, allThing, allSearch, start, size);
                            }
                        });
                    }
                },
                error: function (data) {
                    layer.closeAll("loading");
                    layer.msg('请检查网络', {icon: 5, time: 600});
                }
            });
        }

        countNum(allType, allThing, allSearch);

        form.on('select(typesel)', function (data) {
            allType = data.value;
            countNum(allType, allThing, allSearch);
        });

        form.on('select(thingsel)', function (data) {
            allThing = data.value;
            countNum(allType, allThing, allSearch);
        });

        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '90%' //设置容器宽度
            , height: '100%'
            , anim: 'fade' //切换动画方式
            , interval: '2200'
        });

        /*
        * 点击全部
        * */
        $allbtn.click(function () {
            allThing = 0;
            allType = 0;
            allSearch = "";
            form.render('select');
            $('select[name="type"]').find("option[value=0]").attr("selected", true);
            countNum(allType, allThing, allSearch);
        });

        /*
        * 筛选器
        * */
        $children.click(function () {
            var index = $(this).index() - 1;
            $selectimg.css({
                "left": index * 33 + "%"
            });
        });

        /*
         * 点击更多
         * */
        function clickMore() {
            var dates = 0;
            layer.closeAll("loading");
            $('.more').click(function () {
                var id = $(this).siblings(".ID").text();
                if ((new Date() - dates) > 1500) {
                    layer.load(2);
                    dates = new Date();
                    $.ajax({
                        type: "post",
                        url: "<%=path%>/message/findDetail",
                        async: true,
                        dataType: "json",
                        data: {
                            "id": id
                        },
                        success: function (data) {
                            layer.closeAll("loading");
                            if (data.result === "faild") {
                                if (data.cause === "no login error") {
                                    layer.msg('请先登录智慧校园云平台', {icon: 5, time: 600});
                                    setTimeout(function () {
                                        XuntongJSBridge.call('close');
                                    }, 700);
                                } else {
                                    window.location.href = "<%=path%>/error";
                                }

                            } else {
                                var datas = data.data.message;
                                var time = new Date(datas.time).toLocaleString(),
                                    status = datas.status,
                                    short = datas.linkshort,
                                    qq = datas.qq,
                                    createBy = datas.createby;
                                var thing = thingArray[parseInt(datas.thing) - 1],
                                    type = typeArray[parseInt(datas.type) - 1];
                                var shortText = "", qqText = "", context = "", flag, typetext = "", statustext = "";
                                /*处理图片*/
                                var images = datas.images, imgurl = "", imgarray = new Array();
                                if (images === null || images === "") {
                                    imgurl = '<img src="<%=path%>/images/default.png" alt="" class="mes-img">';
                                } else {
                                    imgarray = images.split(";");
                                    for (inti = 0; inti < imgarray.length; inti++) {
                                        if (imgarray[inti] !== "" && imgarray[inti] !== null && imgarray[inti].length !== 0) {
                                            imgurl += '<div><img src="<%=path%>/res/img/' + imgarray[inti] + '"></div>';
                                        }
                                    }
                                }
                                /*处理按钮*/
                                if (status === "1") {
                                    // 已处理
                                    datas.type === "1" ? statustext = "已找回" : statustext = "已招领";
                                    context = '<div class="contact" style="background:#cccccc;color:#888">' + statustext +
                                        '</div>'
                                } else {
                                    // 未处理
                                    flag = createBy === $selfId.text();
                                    if (flag) {
                                        datas.type === "1" ? typetext = "确认找回" : typetext = "确认招领";
                                        context = '<div class="contact">' + typetext + '</div>'
                                    } else {
                                        context = '<div class="contact">联系他/她</div>'
                                    }
                                }

                                if (short != null && short !== "") {
                                    shortText = '<div class="short">短号：' + short + '</div>\n'
                                }
                                if (qq != null && qq !== "") {
                                    qqText = '<div class="qq">QQ：' + qq + '</div>\n'
                                }


                                //页面层-自定义
                                layer.open({
                                    type: 1,
                                    title: false,
                                    area: [width + "px", height + "px"],
                                    shadeClose: true,
                                    content: '<div class="moreshow">\n' +
                                    '    <div class="all">\n' +
                                    '        <div class="bg"></div>\n' +
                                    '        <div class="title" style="margin-left: 0px;">' + datas.title + '</div>\n' +
                                    '        <div class="message-content" style="padding: 10px;padding-bottom: 20px;text-align: center;">\n' +
                                    '            <div class="left">\n' +
                                    '                <ul>\n' +
                                    '                   <div class="layui-carousel" id="test2" lay-filter="test2" style="width:100%">\n' +
                                    '                       <div carousel-item="">\n' + imgurl +
                                    '                       </div>\n' +
                                    '                   </div>\n' +
                                    '                </ul>\n' +
                                    '                <div class="text">\n' +
                                    '                    <div class="time">时间：' + time + '</div>\n' +
                                    '                    <div class="address">地点：' + datas.address + '</div>\n' +
                                    '                    <div class="type">信息类型：' + type + '</div>\n' +
                                    '                    <div class="type">物品类型：' + thing + ' </div>\n' +
                                    '                    <div class="context">详情：' + datas.detail + '</div>\n' +
                                    '                    <div class="person">联系人：' + datas.linkman + '</div>\n' +
                                    '                    <input id="childrenNum" class="childrenNum" readonly value="' + datas.studentId + '" />\n' +
                                    '                    <div class="phone">电话：<input class="phoneInput" id="phone1" type="text" readonly style="background:#fff;" value="' + datas.linkphone + '"/></div>\n' +
                                    shortText + qqText +
                                    '                </div>\n' + context +
                                    '               <div class="createBy" style="display:none;">' + datas.createby + '</div>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>',
                                    closeBtn: 1,
                                    end: function () {
                                        layer.closeAll("loading");
                                    }
                                });
                                $contact = $('.contact');
                                if (datas.status !== 1) {
                                    $contact.click(function () {
                                        var _this = $(this);
                                        if (flag) {
                                            layer.confirm(typetext + '吗？', {
                                                btn: ['确认', '取消'] //按钮
                                            }, function () {
                                                $.ajax({
                                                    type: "post",
                                                    url: "<%=path%>/message/doFinish",
                                                    async: true,
                                                    dataType: "json",
                                                    data: {
                                                        "id": id
                                                    },
                                                    success: function (data) {
                                                        if (data.operate === "success") {
                                                            var texts = "";
                                                            datas.type === "1" ? texts = "已找回" : texts = "已招领";
                                                            $contact.text(texts);
                                                            $contact.css({
                                                                "color": "#888",
                                                                "background-color": "#cccccc"
                                                            });
                                                            layer.msg(texts, {icon: 1, time: 500});
                                                            setTimeout(function () {
                                                                layer.closeAll();
                                                            }, 700)
                                                        }
                                                    },
                                                    error: function (data) {
                                                        layer.closeAll("loading");
                                                        layer.msg('请检查网络', {icon: 5, time: 600});
                                                    }
                                                });
                                            }, function () {
                                            });
                                        } else {
                                            layer.confirm('需要复制ta的手机还是学号？', {
                                                btn: ['手机', '学号'] //按钮
                                            }, function () {
                                                var phones = document.getElementById("phone1");
                                                phones.select();
                                                document.execCommand("Copy");
                                                layer.msg('复制成功快去联系ta吧!', {
                                                    time: 800, //20s后自动关闭
                                                });
                                            }, function () {
                                                var childrenNums = document.getElementById("childrenNum");
                                                console.log(childrenNums)
                                                childrenNums.select();
                                                document.execCommand("Copy");
                                                layer.msg('复制成功快去联系ta吧!', {
                                                    time: 800, //20s后自动关闭
                                                });
                                                setTimeout(function () {
                                                    // 创建会话
                                                    XuntongJSBridge.call('localFunction', {'name': 'createChat'}, function (result) {
                                                    });
                                                }, 1000);
                                            });
                                        }
                                    });
                                }
                                carousel.render({
                                    elem: '#test2'
                                    , width: '100%'
                                    , arrow: 'always'
                                    , autoplay: 'false'
                                });
                            }
                        },
                        error: function (data) {
                            layer.closeAll("loading");
                            layer.msg('请检查网络', {icon: 5, time: 600});
                        }
                    });
                }
            });
        }

    }();


</script>
</body>
</html>
